<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <div class="class_c">
        <div class="class_left">
          <div class="class_kc" v-for='(item,index) in classify_list'>
            <div class="classifi">
              <div class="class_img" :class="{class_y:currentIndex == index}">
                <div class="class_l_img" @click="tab(index,item)">
                  <img :src="item.cl_img" alt="">
                </div>
              </div>
              <h3>{{item.cl_name}}</h3>
            </div>
            <div class="line" v-if="index != classify_list.length - 1">

            </div>
          </div>
        </div>
        <div class="class_right">
          <div class="class_ma">
            <div class="store_img" >
              <img :src="classify_right.cl_cover" alt="">
            </div>
            <p class="fica">分类</p>
            <ul>
              <li  v-for="(item,index) in classify_right.next_level" @click="serviceDetail(item.cl_id, item.cl_name)">
                <p class="fica_p">{{item.cl_name}}</p>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ClassifiCation',
    data () {
      return {
        classify_list: [],
        currentIndex: 0,
        classify_right: {},
        show: false
      }
    },
    methods: {
      setmode: function (name, content) {
        let mode = this.$chaos.config('mode')
        if (mode === 'website') {
          sessionStorage[name] = JSON.stringify(content)
        } else {
          localStorage[name] = JSON.stringify(content)
        }
      },
      serviceDetail: function (id, name) {
        this.setmode('service', 'one')
        this.setmode('currindex', 'one')
        window.location.href = '#/ServiceDetail?cl_id=' + id + '&name=' + encodeURI(name)
      },
      tab: function (index, name) {
        let thisObj = this
        thisObj.currentIndex = index
        thisObj.classify_right = name
      },
      verify: function () {
        let thisObj = this
        this.$chaos.setTitle('服务分类')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '服务分类')
        this.$store.commit('footerShow', false)
        thisObj.$chaos.ajax({
          slient: true,
          userinfo: false,
          url: 'Service/index',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.classify_list = res.result.classify_list
              thisObj.classify_right = thisObj.classify_list[0]
              thisObj.show = true
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  [v-cloak] {
    display: block;
  }
  .bg_color{
    background: #fff!important;
  }
  .class_c{
    width:100%;
    overflow: auto;
  }
  .class_c .class_left{
    width:25%;
    overflow: auto;
    background: #f9f9f9;
    float: left;
    padding-top: 15px;
    padding-bottom: 15px
  }
  .class_kc{
    padding: 0px 15px 0px 15px;
  }
  .classifi{
    margin:10px 0px;
  }
  .line{
    height: 40px;
    width: 1px;
    background: #dadada;
    margin: 0 auto;
  }
  .class_img{
    width:40px;
    height:40px;
    margin:0 auto;
    border-radius: 50%;
    background: #dadada;
  }
  .class_y{
    background: #febb12;
  }
  .class_g{
    background: #dadada;
  }
  .class_l_img{
    width: 18px;
    height: 18px;
    padding: 11px;
  }
  .class_l_img img{
    width:100%;
    height:100%;
  }
  .classifi h3{
    margin-top:8px;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
  }
  .class_ma{
    margin: 15px 20px 0px 20px;
  }
  .store_img{
    width:100%;
    height:100px;
  }
  .class_right{
    width:75%;
    float: left;
    overflow: auto;
  }
  .store_img img{
    width:100%;
    height:100%;
  }
  .fica{
    margin-top: 13px;
    margin-bottom: 13px;
    line-height: 36px;
    border-bottom: 1px dashed #dadada;
    border-bottom-color: rgb(218, 218, 218);
    color: #dadada;
    font-size: 15px;
  }
  .class_right ul{
    width:100%;
  }
  .class_right ul li{
    width: 50%;
    float: left;
    margin: 8px 0px;
  }
  .class_right ul li:nth-child(2n) .fica_p{
    float: right;
  }
  /*电视维修*/
  *{
    padding:0px;
    border:0px;
    margin:0px;
  }
  body{
    font-size:14px;
    width:100%;
    color: #333;
  }
  ul,li{
    list-style: none;
  }
  /*分类*/
  .top{
    position: fixed;
    width:100%;
    height:46px;
    left:0px;
    top:0px;
    background: #fff;
  }
  .top p {
    margin: 0px 90px;
    text-align: center;
    line-height: 46px;
    font-size: 16px;
  }
  .return_img{
    width: 12px;
    height: 18px;
    float: left;
    margin: 11px 0px 0px 15px;
  }
  .fica_p{
    border: 1px solid #dadada;
    text-align: center;
    color: #000;
    font-size: 15px;
    width: 88%;
    height: 25px;
    line-height: 25px;
  }
  .return_img img{
    width:100%;
    height:100%;
  }
  .class_c{
    width:100%;
    overflow: auto;
  }
  .class_c .class_left{
    width:25%;
    overflow: auto;
    background: #f9f9f9;
    float: left;
  }
  .class_k{
    padding: 15px 15px;
  }
  .classifi{
    margin:10px 0px;
  }
  .line{
    height: 40px;
    width: 1px;
    background: #dadada;
    margin: 0 auto;
  }
  .class_img{
    width:36px;
    height:36px;
    margin:0 auto;
    border-radius: 50%;
    background-color: grey
  }
  .class_y{
    background: #febb12;
  }
  .class_g{
    background: #dadada;
  }
  .class_l_img{
    width: 16px;
    height: 16px;
    padding: 10px;
  }
  .class_l_img img{
    width:100%;
    height:100%;
  }
  .classifi h3{
    margin-top:8px;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
  }
  .class_ma{
    margin: 15px 20px 0px 20px;
  }
  .store_img{
    width:100%;
    height:100px;
  }
  .class_right{
    width:75%;
    float: left;
    overflow: auto;
  }
  .store_img img{
    width:100%;
    height:100%;
  }
  .fica{
    margin-top: 13px;
    margin-bottom: 13px;
    line-height: 36px;
    border-bottom: 1px dashed #dadada;
    border-bottom-color: rgb(218, 218, 218);
    color: #dadada;
    font-size: 15px;
  }
  .class_right ul{
    width:100%;
  }
  .class_right ul li{
    width: 50%;
    float: left;
    margin: 8px 0px;
  }
  .class_right ul li:nth-child(2n) .fica_p{
    float: right;
  }
</style>
